﻿@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<script src="../../Scripts/jquery.signalR-1.0.0-rc2.min.js"></script>
<script src="@Url.Content("~/signalr/hubs")"></script>

<script src="../../Scripts/knockout-2.2.1.js"></script>
<style>
    ul {
        list-style-type: none;
        padding: 0px;
        margin: 0px;
    }
</style>

<!-- ko foreach: Sessions-->
<div>
    <div data-bind="text:SessionName"></div>
    <input id="msg" data-bind="value:$root.Msg">
    
    <input id="broadcast" type="button" value="send" data-bind="click:$root.send">


    <div>

        <div>
            Messages:
        </div>
        <ul id="messages">

               <!-- ko foreach: MessageList-->  
                <li><span data-bind="text:FromUser"></span>:<span data-bind="text:Message"></span></li>

               <!-- /ko -->
        </ul>
    </div>

    <div>
        <div>
            User:
        </div>
       
        <ul id="userList">
               <!-- ko foreach: UserList-->  
            <li>
                <span data-bind="text:UserName"></span>
                <span data-bind="text:ConnectionId"></span>
                <input type="button" value="chatwith" data-bind="click:$root.chatWith.bind($root, $data, $parent)"/>
            </li>

               <!-- /ko -->
        </ul>
     
    </div>
</div>
<!-- /ko -->

<script type="text/javascript">
    function MessageInfo(fromUser, message) {
        this.FromUser =  ko.observable(fromUser);
        this.Message =  ko.observable(message);
    }

    function UserInfo(userName, connectionId) {
        this.UserName= ko.observable(userName);
        this.ConnectionId= ko.observable(connectionId);
    }

    function ChatSession(sessionName, userList, messageList) {
        this.SessionName = ko.observable(sessionName);

        var users = $.map(userList, function (a) {
            return new UserInfo(a.Name);
        });
        this.UserList = ko.observableArray(users);

        var msgs= $.map(messageList, function (a) {
            return new MessageInfo(a.UserInfo.name, a.Message);
        });
        
        this.MessageList= ko.observableArray(msgs);
    }

    function findSession(sessions, sessionName) {
  
        for(var i = 0;i < sessions.length; i++) {
            if(sessions[i].SessionName() == sessionName) {
                return sessions[i];
            }
        }
        return null;
    }

    function ChatSessions() {
        var self = this;
        self.chat = new Object();
        var sessions = [];

        self.Sessions = ko.observableArray(sessions);
        self.Msg = ko.observable('kkk');
        
        self.send = function (me) {
            chat.server.send(me.SessionName(), self.Msg());
        };
        
        self.displayMessage = function (sessionName, name, message) {
            var ss = findSession(self.Sessions(), sessionName);
            ss.MessageList.push(new MessageInfo(name, message));
        };
        


        self.init = function(session) {
            self.Sessions.push(new ChatSession(session.SessionName, session.UserList, []));
        };

        self.refreshUsers = function (session) {
            var ss = findSession(self.Sessions(), session.SessionName);
            var userList = session.UserList;
            //alert(userList.length);
           // ss.UserList(userList);

            var users = $.map(userList, function (a) {
                return new UserInfo(a.Name, a.ConnectionId);
            });
            ss.UserList(users);
        };

        self.chatWith = function(data,parent) {
            var userName = data.UserName();
            var sessionName = parent.SessionName();
            var connectionId = data.ConnectionId();

            chat.server.chatWith(userName, connectionId);
        };

        self.joinSession = function(session) {
            self.Sessions.push(new ChatSession(session.SessionName, session.UserList, []));
        };
    }

    var model = new ChatSessions();
    ko.applyBindings(model);

    // Proxy created on the fly
    var chat = $.connection.yichat;
    chat.state.name = prompt("What's your name?", "");

    model.Chat = chat;
    
    chat.client.init = function (session) {
        model.init(session);
    };

    chat.client.displayMessage = function (sessionName, name, message) {
        model.displayMessage(sessionName, name, message);
    };

    chat.client.refreshUsers = function (session) {
        model.refreshUsers(session);
    };


    chat.client.joinSession = function(session) {
        model.joinSession(session);
    };
    
    $.connection.hub.start().done(function () {
        chat.server.init();
    });

    $(function () {
      




        //chat.client.joinSession = function (parameters) {

        //};

        //chat.client.sayInSession = function (session, message) {
        //    var sessionName = session.SessionName;

        //};

        //// Declare a function on the chat hub so the server can invoke it
        //chat.client.addMessage = function (name, message) {
        //    $('#messages').append('<li>' + name + ":" + message + '');
        //};

        ////user list
        //chat.client.addUser = function (name) {
        //    $('#userList').append('<li>' + name + '');
        //};

        // Start the connection
       


    });
</script>


